<template>
  <!-- 中医疾病构成分析 -->
  <div>
    <h1>{{title}}</h1>
    <h3>时期: {{startDate}} ~ {{endDate}}</h3>
    <h2>医院名称：湖北中医学院附属医院</h2>
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="xh" label="序号" align="center" width></el-table-column>
      <el-table-column prop="bmmc" label="病名" width="300"></el-table-column>
      <el-table-column prop="f1" label="总例数" align="center" width></el-table-column>
      <el-table-column prop="f2" label="占总例数%" align="center" width></el-table-column>
      <el-table-column label="治愈" align="center" width>
        <el-table-column prop="f3" label="例数" align="center" width></el-table-column>
        <el-table-column prop="f4" label="%" align="center" width></el-table-column>
      </el-table-column>
      <el-table-column label="好转" align="center" width>
        <el-table-column prop="f5" label="例数" align="center" width></el-table-column>
        <el-table-column prop="f6" label="%" align="center" width></el-table-column>
      </el-table-column>
      <el-table-column label="未愈" align="center" width>
        <el-table-column prop="f7" label="例数" align="center" width></el-table-column>
        <el-table-column prop="f8" label="%" align="center" width></el-table-column>
      </el-table-column>
      <el-table-column label="死亡" align="center" width>
        <el-table-column prop="f9" label="例数" align="center" width></el-table-column>
        <el-table-column prop="f10" label="%" align="center" width></el-table-column>
      </el-table-column>
      <el-table-column label="其他" align="center" width>
        <el-table-column prop="f11" label="例数" align="center" width></el-table-column>
        <el-table-column prop="f12" label="%" align="center" width></el-table-column>
      </el-table-column>
      <el-table-column label="住院天数	" align="center" width>
        <el-table-column prop="f13" label="合计" align="center" width></el-table-column>
        <el-table-column prop="f14" label="平均" align="center" width></el-table-column>
      </el-table-column>
      <el-table-column label="住院费用（元）" align="center" width>
        <el-table-column prop="f15" label="合计" align="center" width></el-table-column>
        <el-table-column prop="f16" label="平均" align="center" width></el-table-column>
      </el-table-column>
    </el-table>

    <div class="page_block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { diseaseCategory } from "@/api";
import { showOkMsg, showErrorMsg } from "@/utils/index.js";

export default {
  data() {
    return {
      tableData: [],
      startDate: "",
      endDate: "",
      title: "",
      currentPage: 1,
      pageNum: 1,
      pageSize: 15,
      total: 0
    };
  },
  created() {
    this.getTableList();
  },
  props: ["dateList"],
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableList();
      //   console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getTableList();
      //   console.log(`当前页: ${val}`);
    },
    getTableList() {
      if (this.dateList.dateBegin && this.dateList.dateEnd) {
        diseaseCategory({
          startTime: this.dateList.dateBegin,
          endTime: this.dateList.dateEnd,
          bz: this.dateList.num,
          page: this.pageNum,
          limit: this.pageSize
        }).then(res => {
          if (res.code === 0) {
            this.startDate = this.dateList.dateBegin;
            this.endDate = this.dateList.dateEnd;
            this.tableData = res.data.content;
            this.total = res.data.total;
            if (this.dateList.num === 0) {
              this.title = "全病种【ICD-10】类目顺位统计概况表";
            } else {
              this.title =
                "病种类目前 " + this.dateList.num + " 位顺位统计概况表";
            }
            showOkMsg(res.msg);
          }
        });
      } else {
        showErrorMsg("请选择开始或结束日期");
      }
    }
  }
};
</script>

<style scoped>
h1 {
  font-size: 24px;
  text-align: center;
  padding: 23px 0;
}
h3 {
  text-align: center;
  padding-bottom: 20px;
}
h2 {
  padding: 4px 0;
}
.page_block {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
</style>